checkLogin()
renderUsername()
registerLoginOut()
async function getData(){
   
    const res = await axios({
        url:"/dashboard"
      
    })

console.log(res.data);
// 渲染数据
const {overview,year,salaryData,groupData,provinceData} = res.data

// renderOverview(overview)
//渲染薪资走势
renderOverview(overview)
renderSalary(salaryData)
renderYearSalary(year)
renderGroupSalary(groupData)
renderGenderSalary(salaryData)
renderProvince(provinceData)
}

function  renderOverview(overview){
    Object.keys(overview).forEach(key => {
        document.querySelector(`.${key}`).innerHTML = overview[key]
    })
}

function renderYearSalary(year){
    const line = document.querySelector("#line")
    const myChart = echarts.init(line)
    const option = {
        //标题
    title:{
        text:"2024春招薪资走势",
        left:'12',
        top:'15'
    },
    grid:{
        top:'20%'

    },
    yAxis:{
        type:'value',
        splitLine:{
            lineStyle:{
                type:'dashed'
            }
        }
    },

    xAxis:{
        type:'category',
        axsLine:{
            lineStyle:{
                type:'dashed',
                color:'#ccc'
            }
        },
      data:year.map(v=>v.month)
    },
    series:[
        {
        data:year.map(v=>v.salary),
           symbolSize:10,
           lineStyle:{
               width:8,
               color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[
                    {
                        offset:0,color:'#70e2ff'
                    },
                    {
                        offset:0,color:'#70e2ff'
                    }   
                ],
                global:false
               }

        },
        type:'line',
        smooth:true,
        areaStyle:{
            color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[{
                        offset:0,color:'#70e2ff'
                    },
                    {  offset:0,color:'#70e2ff'
                }],
                global:false
            }
       }
     }
    ],
    tooltip:{
        show:true,
        trigger:'axis'
        
}
}
myChart.setOption(option)
}
function renderSalary(salaryData){
    const salary = document.querySelector("#salary")
    const myChart = echarts.init(salary)
    const option = {
        //标题
    title:{
        text:"2024春招薪资分布",
        left:'10',
        top:'15'
    },
    tooltip:{
        trigger:"item"
    },legend:{
        bottom:"5%",
        left:"center"

    },
    series:[
        {
        name:'班级薪资分布',
        type:'pie',
        radius:["55%","70%"],
        itemStyle:{
            borderColor:'#fff',
            borderWidth:2,
            borderRadius:15

        },
        emphasis:{
            label:{
                show:true,
                fontSize:'20',
                fontWeight:'bold'
            
            }
        },
        label:{
            show:true,
            position:'center'
        },
        labelLine:{
            show:true
        },
        avoidLabelOverlap:false,
        data:salaryData.map(v=>{
            return{
                name:v.label,
                value:v.g_count+v.b_count
        }
    })
    }],
    color:['#0066ff','#ff9900','#339933','#ffcc00','#ff6600']
}
myChart.setOption(option) 
}


// 渲染男女薪资分布函数
function renderGenderSalary(salaryData) {
    // console.log(salaryData)
  
    // 初始化实例
    const dom = document.querySelector('#gender')
    const myChart = echarts.init(dom)
  
    // 定义选项和数据
    const option = {
      tooltip: {
        trigger: 'item'
      },
      // 颜色
      color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
      // 标题，通过数组设置多个
      title: [
        {
          text: '男女薪资分布',
          left: 10,
          top: 10,
          // text属性的样式
          textStyle: {
            // 文字的大小
            fontSize: 16
          }
        },
        {
          text: '男生',
          left: '50%',
          top: '45%',
          textStyle: {
            fontSize: 12
          },
          textAlign: 'center'
        },
        {
          text: '女生',
          left: '50%',
          top: '85%',
          textStyle: {
            fontSize: 12
          },
          textAlign: 'center'
        }
      ],
      series: [
        {
          type: 'pie',
          radius: ['20%', '30%'],
          // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
          center: ['50%', '30%'],
          data: salaryData.map(v => {
            return { value: v.b_count, name: v.label }
          })
        },
        {
          type: 'pie',
          radius: ['20%', '30%'],
          center: ['50%', '70%'],
          data: salaryData.map(v => {
            return { value: v.g_count, name: v.label }
          })
        }
      ]
    }
  
    // 基于选项和数据绘制图表
    myChart.setOption(option)
  }
  
  // 渲染籍贯分布
  function renderProvince(provinceData) {
    // console.log(provinceData)
    const dom = document.querySelector('#map')
    const myEchart = echarts.init(dom)
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]
  
    // 筛选数据
    dataList.forEach(item => {
      const res = provinceData.find(v => {
        return v.name.includes(item.name)
      })
      // console.log(res)
      // 数据赋值
      if (res !== undefined) {
        item.value = res.value
      }
    })
    // console.log(dataList)
  
    const option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', 'yellowgreen'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
  }
  
  //渲染每组薪资函数
  function renderGroupSalary(groupData) {
    const dom = document.querySelector('#lines')
    const myChart = echarts.init(dom)
  
    // 定义选项和数据
    const option = {
        //显示提示框
        tooltip: {
            trigger: 'axis'
        },
        //图例
       grid: {
            left: '70',
            top: '30',
            right: '30',
            bottom: '50',
            // containLabel: true
       },
       xAxis:{
        type: 'category',
        // boundaryGap: false,
        data: groupData[1].map(v => v.name),
        axisLabel: {
            lineStyle: {
                color: '#ccc',
                type: 'dashed'
            }
        },
        axisLine: {
            color: '#999',
          
        }
       },
       yAxis: {
           type: 'value',
          splitLine: {
              lineStyle: {
              type: 'dashed',
            //   color: '#999'
          }
       }
    },
    series: [
        {
           name:'期望薪资', 
           data: groupData[1].map(v => v.hope_expect),
           type: 'bar',
           //柱状图样式
           itemStyle: {
               color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#fda224' // 0% 处的颜色
                }, {
                    offset: 1, color: '#fda224' // 100% 处的颜色
                }],
                global: false // 缺省为 false
               }
           }
    },
        {
           name:'实际薪资', 
           data: groupData[1].map(v => v.salary),
           type: 'bar',
           //柱状图样式
           itemStyle: {
               color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#499FEE' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(73, 159, 238, 0.2)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        }
    }
  ]
  }
  myChart.setOption(option)
  }
getData()